<script setup lang="ts">
import type {  TopChildren } from "@/types/categoryTypes/categoryTypes.ts";

interface Props{
   children?:TopChildren[]
}

defineProps<Props>()
</script>

<template>
   <div class="good-list" v-for="(item) in children" :key="item.id">
      <div class="head">
         <h3>- {{item.name}} -</h3>
         <p class="tag">{{item.name}}-温暖柔软-品质之选</p>
         <more path="/"></more>
      </div>
      <div class="body">
         <Good v-for="(good) in item.goods" :good="good"></Good>
      </div>
   </div>
</template>

<style scoped lang="less">
.good-list {
   background-color: #fff;
   margin-top: 20px;
   position: relative;

   .head {
      h3 {
         font-size: 28px;
         color: #666;
         font-weight: normal;
         text-align: center;
         line-height: 100px;
      }
      .more {
         position: absolute;
         top: 20px;
         right: 20px;
      }

      .tag {
         text-align: center;
         color: #999;
         font-size: 20px;
         position: relative;
         top: -20px;
      }
   }


   .body {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding: 0 65px 30px;
   }
}
</style>
